.bannerFragment__root {
    --default-background-color: var(--vnla-primary-color);
    --default-text-color: var(--vnla-foreground-color);
    --space: 8px;

    background-color: var(--background-color, var(--default-background-color, "white"));
    color: var(--text-color, var(--default-text-color, "black"));
    text-align: var(--alignment);
    width: 100%;
    position: relative;
    overflow: hidden;

    & .bannerFragment__image_container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;

        & .bannerFragment__overlay_container,
        & picture,
        & img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        & .bannerFragment__overlay_container {
            z-index: 2;
            background: rgba(0, 0, 0, 0.25);
        }

        & img {
            z-index: 1;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    & .bannerFragment_container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 48px 0;
        z-index: 4;
    }

    & .bannerFragment__copy_lockup {
        display: flex;
        flex-direction: column;
        gap: var(--space);
        max-width: 80ch;
        width: 100%;
        margin: 0 auto 24px;
        & .bannerFragment__title,
        & .bannerFragment__description {
            color: var(--text-color, var(--default-text-color, "black"));
        }
    }

    &.hasOverlay {
        & .bannerFragment__copy_lockup {
            & .bannerFragment__title,
            & .bannerFragment__description {
                text-shadow: 0 0 12px rgb(from var(--vnla-foreground-color, "black") r g b / 0.75);
            }
        }
    }

    & .bannerFragment__search_container {
        text-align: start;
        position: relative;
        max-width: 80ch;
        width: 100%;

        & form {
            min-height: 38px;
        }
    }
}
